<template>
	<view>
		<u-navbar :background="{ backgroundColor: '$custom-color-blue' }" back-icon-color="#fff" :title="article.title"
			title-color="#fff">
			<view class="navbar-right" slot="right">
				<u-icon name="heart" size="44" @click="likeArticle" />
				<u-icon name="share" size="44" @click="shareArticle" />
			</view>
		</u-navbar>
		<web-view class="web-view" :webview-styles="webviewStyles" :src="article.link" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333'
					}
				},
				article: {}
			};
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// 测试阶段获取数据
			// let articleString = JSON.stringify(getApp().globalData.selectArticle);
			// uni.setStorageSync("articleString",articleString);

			// let articleString = uni.getStorageSync("articleString");
			// this.article = JSON.parse(articleString);


			this.article = getApp().globalData.selectArticle;
		},
		methods: {
			likeArticle() {
				console.log("likeArticle");
			},
			shareArticle() {
				console.log("shareArticle");
			},
		}
	}
</script>

<style lang="scss" scoped>
	.web-view {
		height: 100%;
		width: 100%;
		margin-top: 96rpx;
	}

	.navbar-right {
		display: flex;
		color: #fff;
		margin-right: 24rpx;

		.u-icon {
			margin-right: 15rpx;
		}
	}
</style>
